<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <%-- 优化checkbox复选框   --%>
    <style>
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<%-- 增加 表单 --%>
<form class="layui-form" action="" id="addForm" style="display: none;padding: 20px" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">问题描述</label>
        <div class="layui-input-block">
            <%--<input type="text" name="question"  lay-verify="required|question"
                   placeholder="请输入问题描述" autocomplete="off" class="layui-input">--%>
            <textarea name="question" id="questionAdd" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项A</label>
        <div class="layui-input-block">
            <%--<input type="textarea" name="optionTrue" lay-verify="required|optionTrue" placeholder="请输入内容" autocomplete="off"
                   class="layui-input">--%>
            <textarea name="optionTrue" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选项B</label>
        <div class="layui-input-block">
            <%--<input type="textarea" name="optionFalse" lay-verify="required|optionFalse" placeholder="请输入内容" autocomplete="off"
                   class="layui-input">--%>
            <textarea name="optionFalse" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">问题类型</label>
        <div class="layui-input-block">
            <select name="type" lay-verify="required">
                <option value="0">正向计分</option>
                <option value="1">反向计分</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value="0">
        </div>
    </div>

    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addUserFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%-- 修改 表单--%>
<form class="layui-form" action="" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 10px">
    <div class="layui-form-item">
        <label class="layui-form-label">题目编号</label>
        <div class="layui-input-block">
            <input type="text" name="id" lay-verify="required|question"
                   readonly autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">问题描述</label>
        <div class="layui-input-block">
            <%--            onblur="checkUsername(this)"--%>
            <%--<input type="text" name="question"  lay-verify="required|question"
                   placeholder="" autocomplete="off" class="layui-input">--%>
            <textarea name="question" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项A</label>
        <div class="layui-input-block">
            <%--            onblur="checkUsername(this)"--%>
            <%--<input type="text" name="questionTrue"  lay-verify="required"
                   placeholder="" autocomplete="off" class="layui-input">--%>
            <textarea name="optionA" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项B</label>
        <div class="layui-input-block">
            <%--            onblur="checkUsername(this)"--%>
            <%--<input type="text" name="optionB"  lay-verify="required|optionB"
                   placeholder="" autocomplete="off" class="layui-input">--%>
            <textarea name="optionB" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">问题类型</label>
        <div class="layui-input-block">
            <select name="type" lay-verify="required">
                <option value="0">正向计分</option>
                <option value="1">反向计分</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value="1">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFormFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%-- 模糊查询 --%>
<form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">问题</label>
        <div class="layui-input-inline">
            <input type="text" name="question" placeholder="请输入问题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">创建人</label>
        <div class="layui-input-inline">
            <input type="text" name="createBy" placeholder="请输入创建人" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button type="reset" lay-submit class="layui-btn layui-btn-primary" id="myButton">重置</button>
        </div>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn " lay-event="add">添加</a>
    <a class="layui-btn layui-btn-danger " lay-event="del">删除</a>
</script>
<script type="text/html" id="rowBarDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script>


    layui.use(['table', 'form', 'jquery', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#testUpload' //绑定元素ath}/up
            , url: '${pageContext.request.contextPath}/upload.do' //上传接口
            , done: function (res) {
                //上传完毕回调
                let src = res.msg;
                $("#avatar").val(src);
                $('#demo1').attr('src', src);
            }
            , error: function () {
                //请求异常回调
            }
        });
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 500
            , url: '${pageContext.request.contextPath}/questionMht/queryAllByCondition.do' //数据接口
            , page: true
            , limit: 5
            , limits: [5, 10, 15, 20, 25, 30, 100]
            , toolbar: '#barDemo'
            //关闭前端的自动排序，
            , autoSort: false
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: '题目编号', width: 120, sort: true, fixed: 'left'}
                , {field: 'question', title: '题目', width: 120, hidden: true}
                , {field: 'optionA', title: '选项A', width: 120, sort: true}
                , {field: 'optionB', title: '选项B', width: 120, sort: true}
                , {field: 'status', title: '状态', width: 120}
                , {
                    field: 'createTime', title: '创建时间', width: 120, templet: function (d) {
                        return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                    }
                }
                , {field: 'createBy', title: '创建人', width: 120}
                , {
                    field: 'updateTime', title: '修改时间', width: 120, templet: function (d) {
                        return layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss');
                    }
                }
                , {field: 'updateBy', title: '修改人', width: 120}
                , {field: 'flag', title: '标志', width: 120, hide: true}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#rowBarDemo'}
            ]]
        });
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
            /*    layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);*/
        });
        form.on('submit(formDemo)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            table.reload('demo', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    question: data.field.question //排序字段
                    , createBy: data.field.createBy//排序方式
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        /* 添加用户表单提交 */
        form.on('submit(addUserFilter)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url: "${pageContext.request.contextPath}/questionMht/addQuestionMht.do",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        layer.closeAll();//关闭对话框
                        table.reload('demo', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                    layer.msg(ret.msg);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //修改用户信息用户表单提交
        form.on('submit(updateFormFilter)', function (data) {
            console.log(data.elem)//被执行事件的元素DOM对象 ，一般为button对象
            console.log(data.form)//被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field)//当前容器的全部表单字段，名值对形式：{name:value}
            $.ajax({
                url: "${pageContext.request.contextPath}/questionMht/updateQuestionMht.do",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        layer.closeAll(); // 关闭所有对话框
                        table.reload('demo', {
                            page: {
                                curr: 1 // 添加成功之后 重新从第1页开始加载数据表格
                            }
                        });
                    }
                    layer.msg(ret.msg);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这行即可
        })

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            console.log(data)
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        content: $('#addForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        , area: ['600px', '450px']
                    });
                    break;
                case 'del':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //定义一个数组，封装所有的id
                        var ids = [];
                        //循环所有选中的行
                        for (let i = 0; i < data.length; i++) {
                            ids[i] = data[i].id;
                        }
                        console.log(ids.join(","))
                        layer.confirm('真的删除行么', function (index) {
                            //去后台批量删除数据
                            $.ajax({
                                url: "${pageContext.request.contextPath}/questionMht/delQuestionMhtBatch.do",
                                type: "POST",
                                dataType: "JSON",
                                data: {id: ids.join(",")},
                                success: function (data) {
                                    if (data.code == 0) {
                                        //关闭对话框
                                        layer.closeAll(); //疯狂模式，关闭所有层
                                        //刷新表格数据
                                        table.reload('demo');
                                    }
                                    layer.msg(data.msg);
                                }
                            });
                        });
                    }
                    break;
            }
            ;
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'update') {
                //updateFormFilter
                console.log("data.id")
                console.log(data.id)
                form.val("updateFormFilter", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "id": data.id
                    , "question": data.question
                    , "optionA": data.optionA // "name": "value"
                    , "optionB": data.optionB // "name": "value"
                    , "type": data.type // "name": "value"
                });
                layer.open({
                    type: 1,
                    content: $('#updateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    , area: ['500px', '350px']
                });
            } else if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    //去后台批量删除数据
                    $.ajax({
                        url: "${pageContext.request.contextPath}/questionMht/delQuestionMht.do",
                        type: "POST",
                        dataType: "JSON",
                        data: {id: data.id},
                        success: function (data) {
                            if (data.code == 0) {
                                //关闭对话框
                                layer.closeAll(); //疯狂模式，关闭所有层
                                //刷新表格数据
                                table.reload('demo');
                            }
                            layer.msg(data.msg);
                        }

                    });
                });
            }
        });

        /**
         *  题目唯一性验证
         */

        $("#questionAdd").blur(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/questionMht/repetitionName.do",
                data: {question: $("#questionAdd").val()},
                dataType: "json",
                type: "get",
                success: function (res) {
                    if (re.code == 0) {
                        $("#questionAdd").next().html(res.msg);
                        $('#addQuestion').removeClass("layui-btn-disabled").attr("disabled", false);
                    } else {
                        $("#questionAdd").next().html(res.msg);
                        $('#addQuestion').addClass("layui-btn-disabled").attr("disabled", true);
                    }
                }
            })
        })
        $("#myButton").click(function () {
            table.reload('demo',{
                where: { //设定异步数据接口的额外参数，任意设
                    question: ""
                    , createBy: ""
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })


    });

</script>
</body>
</html>
